<template>
  <div :class="className" :style="{height:height,width:width}"/>
</template>

<script>
import echarts from 'echarts'

require('echarts/theme/macarons') // echarts theme
import resize from '../mixins/resize'
import china from '../mixins/china'

const animationDuration = 6000

export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '300px'
    }
  },
  data() {
    return {
      chart: null
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
    })
  },
  beforeDestroy() {
    if (!this.chart) {
      return
    }
    this.chart.dispose()
    this.chart = null
  },
  methods: {
    initChart() {

      this.chart = echarts.init(this.$el, 'macarons')
      let outname = ['北京', '天津', '上海', '重庆', '河北', '河南', '云南', '辽宁', '黑龙江', '湖南', '安徽', '山东', '新疆', '江苏', '浙江', '江西', '湖北', '广西', '甘肃', '山西', '内蒙古', '陕西', '吉林', '福建', '贵州', '广东', '青海', '西藏', '四川', '宁夏', '海南'];
      let outvalue = [353.713, 141.0428, 381.5532, 236.0577, 351.045, 542.592, 232.2375, 249.095, 136.127, 397.5212, 371.14, 710.675, 135.9711, 996.3152, 623.52, 247.575, 458.2831, 212.3714, 87.183, 170.2668, 172.125, 257.9317, 117.268, 423.95, 167.6934, 106.7107, 29.6595, 16.9782, 466.1582, 37.4848, 53.0894];
      let outdata = [];

      let max = 8000,
        min = 10;
      let maxSize4Pin = 150,
        minSize4Pin = 20;

      for (let i = 0; i < outname.length; i++) {
        outdata.push({
          name: outname[i],
          value: outvalue[i]
        })
      }

      let geoCoordMap = {};
      /*获取地图数据*/
      let mapFeatures = echarts.getMap('china').geoJson.features;
//  console.log(mapFeatures)
      mapFeatures.forEach(function(v) {
        console.info(v)
        // 地区名称
        let name = v.properties.name;
        // 地区经纬度
        geoCoordMap[name] = v.properties.cp;

      });
      let convertData = function(outdata) {
        let res = [];
        for (let i = 0; i < outdata.length; i++) {
          let geoCoord = geoCoordMap[outdata[i].name];
          if (geoCoord) {
            res.push({
              name: outdata[i].name,
              value: geoCoord.concat(outdata[i].value),
            });
          }
        }
        return res;
      };

      this.chart.setOption({
        // backgroundColor: '#0F1C3C',

        title: {
          text: '2022省级排放数据（百万吨）',
          x: 'center',
          top:20,
          textStyle: {
            color: '#0086c7',
            fontSize: 16,
            fontWeight: 'normal',
          },

        },

        geo: {
          map: 'china',
          show: true,
          roam: false,
          label: {
            emphasis: {
              show: false
            }
          },
          layoutSize: "100%",
          itemStyle: {
            normal: {
              borderColor: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                offset: 0,
                color: '#00F6FF'
              }, {
                offset: 1,
                color: '#53D9FF'
              }], false),
              borderWidth: 3,
              shadowColor: 'rgba(10,76,139,1)',
              shadowOffsetY: 0,
              shadowBlur: 60
            }
          }
        },
        series: [{
          type: 'map',
          map: 'china',
          aspectScale: 0.75,
          //zoom:1.1,
          label: {
            normal: {
              show: false,
            },
            emphasis: {
              show: false,
            }
          },
          itemStyle: {
            normal: {
              areaColor: {
                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#073684' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#061E3D' // 100% 处的颜色
                }],
              },
              borderColor: '#215495',
              borderWidth: 1,
            },
            emphasis: {
              areaColor: {

                x: 0,
                y: 0,
                x2: 0,
                y2: 1,
                colorStops: [{
                  offset: 0,
                  color: '#073684' // 0% 处的颜色
                }, {
                  offset: 1,
                  color: '#061E3D' // 100% 处的颜色
                }],
              },
            }
          },
          data: outdata,
        }, {
          type: 'effectScatter',
          coordinateSystem: 'geo',
          rippleEffect: {
            brushType: 'stroke'
          },
          showEffectOn: 'render',
          itemStyle: {
            normal: {
              color: {
                type: 'radial',
                x: 0.5,
                y: 0.5,
                r: 0.5,
                colorStops: [{
                  offset: 0,
                  color: 'rgba(5,80,151,0.2)'
                }, {
                  offset: 0.8,
                  color: 'rgba(5,80,151,0.8)'
                }, {
                  offset: 1,
                  color: 'rgba(0,108,255,0.7)'
                }],
                global: false // 缺省为 false
              },
            }

          },
          label: {
            normal: {
              show: true,
              position: 'inside',
              formatter: function(para) {
                return '{cnNum|' + para.data.value[2] + '}'
              },
              rich: {
                cnNum: {
                  fontSize: 9,
                  color: '#D4EEFF',
                }
              }
            },
          },
          symbol: 'circle',
          symbolSize: function(val) {
            if (val[2] === 0) {
              return 0;
            }
            let a = (maxSize4Pin - minSize4Pin) / (max - min);
            let b = maxSize4Pin - a * max;
            return a * val[2] + b * 1.2;
          },
          data: convertData(outdata),
          zlevel: 1,
        }]
      })
    }
  }
}
</script>
